<template>
  <view class="page_box">
    <!-- 搜索框 -->
    <view class="head_box">
      <image src="../../static/images/search_icon.png"></image>
      <input
        v-model="searchVal"
        class="search-input"
        placeholder="搜索商品"
        @keyup.enter="onSearch"
      />
      <i-buttons color="#FF9400" @click="onSearch" padding="0" border="none"
        >搜索</i-buttons
      >
    </view>

    <view class="content_box">
      <!-- 搜索历史 -->
      <view class="search-history" v-if="historyTag.length">
        <view class="title-box">
          <view class="title">搜索历史</view>
          <i-buttons
            padding="0"
            border="none"
            bgColor="transparent"
            @tap="showModal = true"
          >
            清除搜索历史
          </i-buttons>
        </view>
        <view class="content">
          <view
            class="item"
            @tap="onSearch(item)"
            v-for="(item, index) in historyTag"
            :key="index"
          >
            {{ item }}
          </view>
        </view>
      </view>
    </view>

    <!-- modal -->
    <i-drawer
      v-model="showModal"
      title="是否清除历史消息"
      @confirm="clearSearchHistory"
    ></i-drawer>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const searchVal = ref("");
const historyTag = ref([]);
const showModal = ref(false);

onMounted(() => {
  historyTag.value = uni.getStorageSync("searchHistoryArr")
    ? JSON.parse(uni.getStorageSync("searchHistoryArr"))
    : [];
});

const onSearch = (e) => {
  const value = typeof e === "string" ? e : searchVal.value;
  if (value && !historyTag.value.includes(value)) {
    const searchHistoryArr = JSON.stringify(getArr(historyTag.value, value));
    uni.setStorageSync("searchHistoryArr", searchHistoryArr);
  }
  // 跳转到搜索结果页面
  uni.navigateTo({
    url: `/pages/views/goodsList?keywords=${value}`,
  });
  searchVal.value = "";
};

const getArr = (list, item) => {
  const arr = [...list];
  const length = 10; // 队列长度
  arr.length < length ? arr.unshift(item) : arr.pop();
  return arr;
};

const clearSearchHistory = () => {
  historyTag.value = [];
  uni.removeStorageSync("searchHistoryArr");
  showModal.value = false;
};
</script>

<style lang="scss" scoped>
.page_box {
  width: 100%;
  height: 100%;
}
.head_box {
  height: 88rpx;
  box-sizing: border-box;
  @include flexR;
  width: calc(100% - 48rpx);
  margin: 24rpx auto;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 12rpx 24rpx;
  image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 12rpx;
    flex-shrink: 0;
  }
  .search-input {
    width: 100%;
    height: 64rpx;
    padding: 0 20rpx;
    // border: 1px solid #ccc;
    border-radius: 32rpx;
    font-size: 28rpx;
  }
}
.search-history {
  padding: 30rpx;
  .title-box {
    @include flexRS;
    margin-bottom: 24rpx;
    .title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
    }
    .clear-history-btn {
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
    }
  }
  .content {
    width: 100%;
    @include flexR;
    flex-wrap: wrap;
    justify-content: flex-start;

    .item {
      padding: 0 20rpx;
      line-height: 60rpx;
      background: #eee;
      border-radius: 30rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
